<template>
  <n-modal v-model:show="isVisible" title="添加入库单" preset="dialog" @close="onClose" style="height: 580px;width: 700px">
    <n-form @submit.prevent="handleSubmit" label-width="120px" class="form-container">
      <br>
      <div class="form-row" style="margin-top: 20px">
        <n-form-item label="货物：" path="storeCommodityId">
          <n-select
              v-model:value="form.storeCommodityId"
              style="width:180px"
              size="small"
              :options="storeCommodity"
              filterable
              clearable
          >
          </n-select>
        </n-form-item>
        <n-form-item label="仓库：" path="storeName" style="margin-left: 30px">
          <n-input
              v-model:value="form.storeName"
              style="width:180px"
              size="small"
              :options="stores"
              filterable
              clearable
              disabled
          >
          </n-input>
        </n-form-item>

      </div>
      <div class="form-row">
        <n-form-item label="供应商：" path="objectId">
          <n-select
              v-model:value="form.objectId"
              style="width:180px"
              size="small"
              :options="suppliers"
              filterable
              clearable
          >
          </n-select>
        </n-form-item>
        <n-form-item label="采购人员：" path="adminId" style="margin-left: 30px">
          <n-select
              v-model:value="form.adminId"
              style="width:180px"
              size="small"
              :options="admins"
              filterable
              clearable
          >
          </n-select>
        </n-form-item>
      </div>
      <div class="form-row">
        <n-form-item label="价格：" path="price" >
          <n-input v-model:value="form.price" placeholder="请输入价格" />
        </n-form-item>
        <n-form-item label="数量：" path="quantity" style="margin-left: 30px">
          <n-input v-model:value="form.quantity" placeholder="请输入数量" />
        </n-form-item>
      </div>

      <!-- 提交按钮 -->
      <div class="submit-row">
        <n-form-item>
          <n-button type="primary" native-type="submit" @click="handleSubmit">提交</n-button>
        </n-form-item>
      </div>
    </n-form>
  </n-modal>
</template>

<script setup>
import {ref, watch} from 'vue';
import api from "@/api/admin.js";
import {List} from "echarts";
import {useUserStore} from "@/store/index.js";

const userStore = useUserStore()
const id = userStore.getId();
const emit = defineEmits(['updatePage'])
const props = defineProps({
  show: {
    type: Boolean,
    required: true,
  },
  onClose: {
    type: Function,
    required: true,
    },
    option: {
      type: List,
      require: true
    },
    stores: {
      type: Array,
      required: true
    },
    storeCommodity: {
      type: Array,
      required: true
    },
    suppliers: {
      type: Array,
      required: true
    },
    admins: {
      type: Array,
      required: true
    },
  });
const form = ref({
  type: "inbound",
  storeId: null,
  storeCommodityId: null,
  objectId: null,
  adminId: null,
  price: '',
  quantity: '',
  storeName: ''
});
const isVisible = ref(props.show);
watch(() => props.show, (newVal) => {
  isVisible.value = newVal;
});

const fetchWarehouse = async (commodityId) => {
  try {
    const response = await api.findStoreByCommodityId({params: {storeCommodityId: commodityId}}); // 假设你的API路径是这个
    if (response.data && response.code === 200) {
      return response.data; // 返回仓库对象
    } else {
      $message.error(response.message)
    }
  } catch (error) {
    $message.error("获取仓库信息失败！")
    return null;
  }
};

watch(() => form.value.storeCommodityId, async (newVal) => {
  if (newVal) {
    const warehouse = await fetchWarehouse(newVal);

    form.value.storeId = warehouse ? warehouse.id : null;
    form.value.storeName = warehouse ? warehouse.name : "";
  } else {
    form.value.storeId = null;
    form.value.storeName = "";
  }
});

const handleSubmit = async () => {
  try {
    const res = await api.addInboundDocument(
        {
          ...form.value,
          adminId: id,
        }
    )
    if (res.code === 200) {
        emit("updatePage")
      }
      else {
        $message.error(res.message)
      }
    } catch (err) {
      $message.error("添加失败！")
    }finally{
      clear()
      props.onClose();
    }
  };
  const clear = () => {
    form.value.adminId = null
    form.value.storeId = null
    form.value.storeCommodityId=null
    form.value.objectId=null
    form.value.price=""
    form.value.quantity = ""
    form.value.storeName = ""
  }
</script>

<style scoped>
    .form-container {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
        position: relative;
    }

    .form-row {
        display: flex;
        gap: 20px;
        align-items: center;
        width: 100%;
    }

    .form-row > n-form-item {
        flex: 1;
    }

    .submit-row {
        justify-content: center;
        display: flex;
        width: 100%;
    }
</style>
